<template>

  <el-select v-model="userRole" placeholder="请选择">
    <el-option label="请选择" value=""></el-option>
    <el-option
      v-for="item in roleOptions"
      :key="item.roleId"
      :label="item.roleName"
      :value="item.roleId">
    </el-option>
  </el-select>

</template>
<script>
export default {
  name: 'roleSelect',
  props: ['selectModel'],
  data () {
    return {
      tempPromise: {},
      roleOptions: [],
      userRole: this.selectModel
    }
  },
  mounted () {
    this.tempPromise = this.getList()
  },
  watch: {
    selectModel (val) {
      this.tempPromise.then(resolve => {
        this.userRole = val
      })
    },
    userRole (val) {
      this.$emit('onRoleChange', val)
    }
  },
  methods: {
    getList () {
      // let _this = this
      return new Promise(resolve => {
        let url = this.$base.getUrl('getUserRoles')
        let params = {
          url: url
        }
        this.$store.dispatch('getForm', params).then((res) => {
          this.roleOptions = res
          resolve()
        })
      })
    }
  }
}
</script>
